<template>
    <div class="change-telephone">
        <header >
            <el-button icon="el-icon-arrow-left" type='text' primary='default' v-if='$store.state.isPc'>
                <router-link to='/user-center'>用戶中心</router-link>
            </el-button>
            <p>修改手機號</p>
        </header>
        <div class="main">
            <div class="item c-c imgs">
                <div>
                    <img :src="imgSrc" alt="">
                    <p>驗證舊手機</p>
                </div>
                <div class="line"></div>
                <div>
                    <img src="../../assets/imgs/new_unbind_mobile.png" alt="">
                    <p>驗證新手機</p>
                </div>
            </div>
            <div class="item">
                <el-alert
                    title="修改手機號，24小時內限制提幣。一個手機號只能綁定一個帳號。更換手機號後，下次登入可使用新手機號登入。"
                    type="warning"
                    show-icon
                    :closable='false'>
                </el-alert>
            </div>
            <div class="item" v-if='!inCheckOld'>
                <el-button type='primary' class='width100' @click='inCheckOld = true'>驗證原手機號</el-button>
            </div>
            <div class="item" v-if='inCheckOld && !checkOldPassed'>
                <p class="telephone">{{$store.state.userInfo.telephone}}</p>
                <el-input placeholder="驗證碼" v-model="old_code">
                    <el-button slot="append"  style='font-size:14px;width:140px;' @click='getCode' :disabled='disabledOld'>{{check_old_btn_text}}</el-button>
                </el-input>
                <div class="item">
                    <el-button type='primary' class='width100' @click='checkOldTelHandle'>確定</el-button>
                </div>
            </div>
            <template  v-if='checkOldPassed'>  
                <div class="item">
                    <el-select v-model='new_nation_id' style="width : 100%" placeholder="請選擇國家">
                        <el-option 
                            v-for='item in $store.state.nation' 
                            :key='item.id' 
                            :label='`${item.title}-${item.code}`' 
                            :value='item.id'></el-option>
                    </el-select>
                </div>
                <div class="item">
                    <el-input placeholder="新手機號" v-model="new_tel"></el-input>
                </div>
                <div class="item" >
                    <el-input placeholder="驗證碼" v-model='new_code'>
                        <el-button slot="append"  style='font-size:14px;width:140px;'  @click='getCode' :disabled='disabledNew'>{{new_btn_text}}</el-button>
                    </el-input>
                </div>
                <div class="item">
                    <el-button type='primary' class='width100' @click='changeTelConfirmHandle'>確定</el-button>
                </div>
            </template>
        </div>
    </div>
</template>

<script>
    import { GetTelephoneCode } from '@/api/common'
    import { CheckOldTel, BindNewTel } from '@/api/user'
    export default {
        data() {
            return {
                inCheckOld : false, //是否正则验证旧手机
                checkOldPassed : false,//是否已验证通过旧手机
                check_old_btn_text : '發送驗證碼',
                old_code : null,
                disabledOld : false,
                new_btn_text : '發送驗證碼',
                disabledNew :false,
                time_count_old : 60,
                new_tel : null,
                new_code : null,
                new_nation_id : 2,
                time_count_new : 60,
                timer : null
            };
        },
        computed : {
            imgSrc () {
                return !this.checkOldPassed ? require('@ast/imgs/unbind_mobile.png') : require('@ast/imgs/bind_mobile.png')
            }
        },
        methods : {
            getCode () {
                if (this.checkOldPassed) {
                    if (!this.new_tel) {
                        this.$alert('请输入新的手机号码', `提示`)
                        return;
                    }
                }
                GetTelephoneCode({
                    record_type : this.checkOldPassed ? 'reg' :'check',
                    telephone : this.checkOldPassed ? this.new_tel : this.$store.state.userInfo.telephone,
                    nation_id : this.checkOldPassed ? this.new_nation_id : this.$store.state.userInfo.nation_id,
                }).then(_ => {
					this.$message({
					    message : '驗證碼發送成功',
					    type : 'success'
					})
                    this.disabledOld = true;
                    this.disabledNew = true;
                    if (this.checkOldPassed) {  
                        this.newCodeTimeCount()
                    } else {
                        this.oldCodeTimeCount()
                    }
                    
                })
            },
            oldCodeTimeCount () {
                this.time_count_old -= 1;
                this.check_old_btn_text = `${this.time_count_old}s後重新發送`
                setTimeout(_ => {
                    if (this.time_count_old <= 0) {
                        this.disabledOld = false;
                        this.time_count_old = 60;
                        this.check_old_btn_text = `重新發送`
                    } else {
                        this.oldCodeTimeCount()
                    }
                }, 1 *1000)
            },
            newCodeTimeCount () {
                this.time_count_new -= 1;
                this.new_btn_text = `${this.time_count_new}s後重新發送`
                setTimeout(_ => {
                    if (this.time_count_new <= 0) {
                        this.disabledNew = false;
                        this.time_count_new = 60;
                        this.new_btn_text = `重新發送`
                    } else {
                        this.newCodeTimeCount()
                    }
                }, 1 *1000)
            },
            //计时函数
            timeCountHandle () {
                this.time_count -= 1;
                if (!this.checkOldPassed) {
                    this.check_old_btn_text = `${this.time_count}s後重新發送`
                } else {
                    this.new_btn_text = `${this.time_count}s後重新發送`
                }

                this.timer = setTimeout(_ => {
                    if (this.time_count <= 0) {
                        this.timer = null;
                        clearTimeout(this.timer)
                        this.disabledOld = false;
                        this.disabledNew = false;
                        this.disabled = false;
                        this.time_count = 10;

                        if (this.checkOldPassed) {
                            this.check_old_btn_text = `重新發送`
                        } else {
                            this.new_btn_text = `重新發送`
                        }
                    } else if (this.checkOldPassed) {
                        this.timer = null;
                        clearTimeout(this.timer)
                    } else {
                        this.timeCountHandle();
                    }
                }, 1 *1000)
            },
            //验证旧手机
            checkOldTelHandle () {
                if (!this.old_code) {
                    this.$alert('請填寫原手機收到的驗證碼', '提示')
                    return;
                }
                CheckOldTel({
                    telephone : this.$store.state.userInfo.telephone,
                    code :this.old_code
                }).then(res => {
                    this.timer = null;
					this.disabledNew = false;
                    clearTimeout(this.timer)
                    this.new_btn_text = '發送驗證碼'
                    this.checkOldPassed = true;
                    this.$message({
                        message : '驗證成功',
                        type : 'success'
                    })
                })
            },
            //修改旧手机号码确认
            changeTelConfirmHandle () {
                if (!this.new_tel) {
                    this.$alert('请输入新的手机号码', `提示`)
                    return;
                }
                if (!this.new_code) {
                    this.$alert('請填寫新手機收到的驗證碼', `提示`)
                    return;
                }
                BindNewTel({
                    telephone :this.new_tel,
                    code : this.new_code,
                    nation_id : this.new_nation_id
                }).then(res => {
                    this.$alert('新手机绑定成功，请重新登录', `提示`, {
                        callback : _ => {
                            this.$store.commit('clearUserInfo');
                            this.$router.replace('/login');
                        }
                    })
                })
            }
        }
    }
</script>
<style lang="less" scoped>
    @import url('../../assets/css/_b.less');
    @media screen and (max-width : 670px) {
        .change-telephone {
            width: 80%;
            background: #fff;
            margin: 30px auto;
            padding: 15px 5%;
            header {
                position: relative;
                padding: 30px;
                border-bottom: 1px solid @borderColor;
                text-align: center;
                .el-button {
                    position: absolute;
                    left: 30px;
                }
                p {
                    font-size: 28px;
                    font-weight: bold;
                    text-align: center;
                }
            }
            .main {
                padding-bottom: 30px;
                img {
                    width: 64px;
                    height: 64px;
                }
                .item {
                    // width: 390px;
                    margin: 30px auto;
                }
                .imgs {
                    .line {
                        width: 100px;
                        height: 1px;
                        border-top: 1px dashed @borderColor;
                        margin-bottom: 45px;
                    }
                    p {
                        padding: 15px 0;
                        color: @textColorOne;
                    }
                }
                .telephone {
                    font-size: 15px;
                    color: @textColorTwo;
                    margin-bottom: 15px;
                }
            }
        }
    }
    @media screen and (min-width : 670px) {
        .change-telephone {
            width: 1010px;
            box-shadow: 0 4px 8px 0 rgba(225, 234, 240, 0.8);
            background: #fff;
            margin: 60px auto;
            header {
                position: relative;
                padding: 30px;
                border-bottom: 1px solid @borderColor;
                text-align: center;
                .el-button {
                    position: absolute;
                    left: 30px;
                }
                p {
                    font-size: 28px;
                    font-weight: bold;
                    text-align: center;
                }
            }
            .main {
                padding-bottom: 30px;
                img {
                    width: 64px;
                    height: 64px;
                }
                .item {
                    width: 390px;
                    margin: 30px auto;
                }
                .imgs {
                    .line {
                        width: 200px;
                        height: 1px;
                        border-top: 1px dashed @borderColor;
                        margin-bottom: 45px;
                    }
                    p {
                        padding: 15px 0;
                        color: @textColorOne;
                    }
                }
                .telephone {
                    font-size: 15px;
                    color: @textColorTwo;
                    margin-bottom: 15px;
                }
            }
        }
    }
</style>